<template>
	<view class="consultation-card">
		<image class="doctor-image" :src="cardData.imageUrl" mode="aspectFill"></image>
		<view class="doctor-info">
			<text class="doctor-name">{{ cardData.doctorName }}</text>
			<text class="doctor-title">{{cardData.doctorTitle}}</text>
			<view class="price-section">
				<text class="current-price">￥{{ cardData.currentPrice }}起</text>
				<text class="original-price">￥{{ cardData.originalPrice }}起</text>
			</view>
			<text class="consultation-count">月咨询{{cardData.consultationCount}}位用户</text>
			<text class="personal-intro">个人简介 &gt;</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"ConsultationCard",
		data() {
			return {
				
			};
		},
		props:{
			cardData:{
				type:Object,
				default(){
					return{
						imageUrl:'/static/images/default-doctor-listen.png',
						doctorName:'未知医生',
						doctorTitle:'未知工作室',
						currentPrice:0,
						originalPrice:0,
						consultationCount:0,
					};
				},
			},
		}
	}
</script>

<style scoped>
.consultation-card{
	background-color: #e8f5f5;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	padding: 15px;
	text-align: center;
	width: 140px;
	margin: 10px;
}

.doctor-image{
	width:50px;
	height: 50px;
	border-radius: 50%;
	margin-bottom: 10px;
}

.doctor-info{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.doctor-name{
	font-weight: bold;
	font-size: 14px;
}

.doctor-title{
	color: #666;
	font-size: 12px;
	margin-top: 2px;
	margin-bottom: 10px;
}

.price-section{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 8px;
}

.current-price{
	color: #f00;
	font-weight: bold;
	font-size: 16px;
}

.original-price{
	color: #999;
	font-size: 12px;
	text-decoration: line-through;
	margin-left: 5px;
}

.consultation-count{
	color: #5eb9ad;
	font-size: 12px;
	margin-bottom: 5px;
}

.personal-intro{
	color: #1e88e5;
	font-size: 12px;
}
</style>